import React from 'react'
import { Button, Input, InputGroup, Stack, InputLeftAddon, InputRightAddon, FormHelperText, FormControl, RadioGroup, Radio, Select, Switch, FormLabel, Flex } from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'

function SignUp() {
  return (
    <form>
      <Stack spacing="0">
        <FormControl isDisabled isInvalid>
          <InputGroup>
            <InputLeftAddon children={<FaUserAlt />} />
            <Input placeholder="请输入用户名" />
          </InputGroup>
          <FormHelperText mt="0">用户名是必填项</FormHelperText>
        </FormControl>
        <InputGroup>
          <InputLeftAddon children={<FaLock />} />
          <Input placeholder="请输入用户名" />
          <InputRightAddon children={<FaCheck />} />
        </InputGroup>
        <RadioGroup defaultValue="0">
          <Radio value="0" mr="5">男</Radio>
          <Radio value="1">女</Radio>
        </RadioGroup>
        <Select placeholder="请选择">
          <option value="Java">Java</option>
          <option value="大前端">大前端</option>
          <option value="Java">Java</option>
        </Select>
        <Flex>
          <Switch id="deal" mt="2px" mr="3"/>
          <FormLabel htmlFor="deal">是否同意协议</FormLabel>
        </Flex>
        <Button colorScheme="teal" _hover={{bgColor: 'tomato'}} w="100%">注册</Button>
      </Stack>
    </form>
  );
}

export default SignUp;
